<template>
  <div class="list">
    <Header></Header>
    <div class="page">
      <div class="page-head">
        <div class="h-title">
          <div class="pt-l">
            <i></i>
            XXX自动监测详情
          </div>
          <div class="pt-r">
            <el-button type="primary" size="small">查询</el-button>
            <el-button size="small">重置</el-button>
          </div>
        </div>
        <el-form :model="cardForm" ref="cardForm" class="card-form">
          <el-form-item prop="riverId" label="选择河流">
            <el-select v-model="value" clearable placeholder="选择河流">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="districtId" label="选择区县">
            <el-select
              v-model="value2"
              multiple
              collapse-tags
              placeholder="选择区县"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="siteName"
            :rules="filter_rules({ maxLength: 20 })"
            label="断面"
          >
            <el-input
              v-model="cardForm.siteName"
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-form-item>
          <el-form-item prop="jcpc" label="监测频次">
            <el-select
              v-model="value2"
              multiple
              collapse-tags
              placeholder="监测频次"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="jcDate" label="监测时间" class="w-auto">
              <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="jcpc" label="达标情况">
            <el-select
              v-model="value2"
              multiple
              collapse-tags
              placeholder="达标情况"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="jcpc" label="考核标准">
            <el-select
              v-model="value2"
              multiple
              collapse-tags
              placeholder="考核标准"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form-btn">
            <el-button
              type="primary"
              size="small"
              :loading="isClick"
              @click="submitForm('cardForm')"
              >查询</el-button
            >
            <el-button
              size="small"
              :loading="isClick"
              @click="resetForm('cardForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="page-cont">
        <el-tabs type="border-card">
          <el-tab-pane label="数据列表">
            <TableCard
              ref="TableCard"
              :key="index"
              :classType="tableData.classType"
              :id="tableData.id"
              :index="index"
              :operate="tableData.operate"
              :operateArray="tableData.operateArray"
              :title="tableData.title"
              :search="tableData.search"
              :page="tableData.page"
              :limit="tableData.limit"
              :ajaxMsg="tableData.ajaxMsg"
              :tableTh="tableData.tableTh"
              v-on:rowClick="rowClickFun"
              :rowRed="false"
            ></TableCard>
          </el-tab-pane>
          <el-tab-pane label="单因子分析">单因子分析</el-tab-pane>
          <el-tab-pane label="多因子分析">多因子分析</el-tab-pane>
          <el-tab-pane label="碧水日历">碧水日历</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TableCard from "@/components/tableCard.vue";
import Header from "@/components/Header.vue";
export default {
  name: "list",
  components: {
    TableCard,
    Header,
  },
  data() {
    return {
      cardForm: {},
      isClick: false,
      num: 0,
      search: "",
      searchType: "jjmc",
      // table list
      tableData: {
          title: "数据列表",
          id: "indexTableList0",
          classType: "cursor-pointer",
          operate: true,
          operateArray: [
            {
              operateFun: "add",
              msg: "msg",
              icon: '11',
              name: "添加11",
            },
          ],
          tableSort: true,
          more: "",
          search: false,
          page: true,
          limit: 500,
          ajaxMsg: {
            url: "/home/companyinfo/list",
            data: {},
          },
          tableTh: [
            {
              name: "监测时间",
              prop: "date",
            },
            {
              name: "是否验证",
              prop: "verify",
            },
            {
              name: "水质类别",
              prop: "water",
            },
            {
              name: "水温(℃)",
              prop: "sw",
            },
            {
              name: "PH(无量纲)",
              prop: "wlg",
              default: "0",
              width: 120
            },
            {
              name: "溶解氧(mg/L)",
              prop: "rjy",
              default: "0",
              width: 120
            },
            {
              name: "导电率(℃)",
              prop: "dll",
              width: 100
            },{
              name: "浊度(NTU)",
              prop: "zd",
              width: 100
            },{
              name: "高猛酸盐指数(mg/L)",
              prop: "gmsyzs",
              default: "0",
              width: 150
            },{
              name: "氨氮(mg/L)",
              prop: "ad",
              default: "0",
              width: 100
            },{
              name: "总磷(mg/L)",
              prop: "zl",
              width: 100
            },{
              name: "总氮(mg/L)",
              prop: "zdan",
              width: 100
            },
          ],
        },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      value1: "",
      value2: [],
    };
  },
  methods: {
    // 点击table tr
    rowClickFun(res) {
      console.log(res);
    },
    submitForm() {
      const _this = this;
      _this.$refs.cardForm.validate(function (valid) {
        if (!valid) {
          _this.isClick = false;
          return false;
        }
        _this.$refs.TableCard.searchFun(_this.cardForm);
      });
    },
    resetForm(formName) {
      const _this = this;
      //重置表单
      _this.$refs[formName].resetFields();
    },
  },
};
</script>
